
<template>
	<div id="show-blog" v-theme:column="'narrow'">
		<h1>博客总览</h1>
		<input type="text" v-model="search" placeholder="搜索"/>
		<div class="single" v-for="blog in filterBlogs">
			<!--to-uppercase 过滤器-->
			<router-link v-bind:to="'/page/'+blog.id">
				<h4 v-titleColor>{{blog.title | to-uppercase}}</h4>
			</router-link>
			<article>{{blog.body | snippet}}</article>
		</div>
	</div>
</template>

<script>
	export default{
		name:"show-blog",
		data(){
			return{
				blogs:[],
				search:""
			}
		},
		created(){
//			this.$http.get("./../static/mock/blogs.json")
			this.$http.get("/posts")
			.then(data => {
//				console.log(data);
				//slice  截取前10条
				this.blogs=data.data.slice(0,10);
			});
		},
		computed:{
		 	filterBlogs:function(){
		 		return this.blogs.filter((blog) => {
		 			return blog.title.match(this.search);
		 		})
		 	}
		},
		//自定义局部过滤器
		filters:{
			"to-uppercase":function(value){
				return value.toUpperCase();
			}
//			toUppercase(value){ //es6写法
//				return value.toUpperCase();
//			}
		},
		//自定义局部指令
		directives:{
			"titleColor":{
				bind(el,binding,vnode){
					el.style.color="#"+Math.random().toString(16).slice(2,8);
				}
			}
		}
	
	}
</script>

<style scoped="scoped">
	#show-blog{
		margin:0 auto;
	}
	.single{
		background: #f6f6f6;
		padding:20px;
		margin:10px auto;
	}
</style>